<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-06-29 16:47:20
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-08-03 18:06:00
 * @FilePath: \cxl-h5\src\pages\report\base\CheckInfo.vue
-->
<template>
    <section class="information-container">
        <section class="info-item" v-for="(item, index) in list" :key="item.name">
            <section class="item-box" @click="onSpread(index)">
                <section class="item-title">{{ item.name }}</section>
                <section class="item-value">
                    <section class="normal" v-if="Number(item.value) === 0">正常</section>
                    <section class="abnormal" v-else>
                        <p>{{ item.list.length }}项异常</p>
                        <span :class="['iconfont', item.spread ? 'icon-RectangleCopy8' : 'icon-RectangleCopy5']"></span>
                    </section>
                </section>
            </section>
            <!-- 展开内容 -->
            <section class="spread-container" v-show="item.spread && item.list.length">
                <section class="table-title">
                    <ul>
                        <li>配件名</li>
                        <li>类型</li>
                    </ul>
                </section>
                <section class="table-content">
                    <ul v-for="li in item.list" :key="li">
                        <li>{{ li.name }}</li>
                        <li>{{ li.type }}</li>
                    </ul>
                </section>
            </section>
        </section>
    </section>
</template>

<script setup lang="ts">
import { reactive, watchEffect } from 'vue'
//接收父级传递的参数
const props = defineProps(['data', 'keys', 'download'])

interface ItemInterface {
    name: string
    value: string
    list: any[]
    spread: boolean //展开 默认false
}

const list: ItemInterface[] = reactive([])

//监听参数的变化
watchEffect(() => {
    list.length = 0
    for (const key in props.data) {
        list.push({
            name: props.keys[key],
            value: props.data[key].value,
            list: props.data[key].list,
            spread: true
        })
    }

    if (props.download) {
        list.forEach((item: ItemInterface) => {
            item.spread = true
        })
    }
})

//点击展开明细
const onSpread = (index: number) => {
    list[index].spread = !list[index].spread
}
</script>

<style scoped lang="scss">
.information-container {
    box-sizing: border-box;
}
.info-item {
    font-size: var(--cxl-size-15);

    .item-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    &:not(:last-child) {
        margin-bottom: var(--cxl-size-10);
    }

    .abnormal {
        display: flex;
        align-items: center;
        p {
            color: var(--cxl-color-error);
        }
        > span {
            font-size: var(--cxl-size-22);
        }
    }
}

.spread-container {
    margin: var(--cxl-size-10) 0;
    .table-title {
        ul {
            li {
                font-size: var(--cxl-size-15);
                font-weight: 600;
            }

            background-color: var(--cxl-color-f2f6f8);
        }
    }
    .table-content {
        border-left: 1px solid var(--cxl-color-f2f6f8);
        ul {
            li {
                font-size: var(--cxl-size-15);
                border-right: 1px solid var(--cxl-color-f2f6f8);
                border-bottom: 1px solid var(--cxl-color-f2f6f8);
                color: var(--cxl-color-999999);
                box-sizing: border-box;
                padding: var(--cxl-size-6) var(--cxl-size-10);
                line-height: var(--cxl-size-22);
                flex-wrap: wrap;
            }
        }
    }
    ul {
        width: 100%;
        display: flex;
        li {
            width: 50%;
            text-align: center;
            font-size: var(--cxl-size-13);
            line-height: var(--cxl-size-30);
        }
    }
}
</style>
